THEOplayerで作成した動画プレイヤーに自前で用意したチャプターマーカーを追加してみた

#THEOplayer

#ソリューション

森亮介

2020.09.29

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

本日私が頂くのは THEOplayer です。

動画プレイヤーによく付随する機能として、チャプターがあります。

Youtube とかでも、シークバーがチャプター分割されている動画がありますよね。

※ こういうやつ

THEOplayerではチャプターマーカーと呼ばれています。シークバーにカーソルを合わせると、THEOplayerのチャプターマーカーとタイトルが、ユーザーがコンテンツのさまざまな部分をより簡単に識別できるようにします。また、動画のお気に入りの部分を再訪することもできます。

今日は自前で用意したチャプターファイルを、THEOplayer を使って表示出来るようにしてみたいと思います。

THEOplayerは、WebVTT、SRT、およびその他のテキストトラック形式でのチャプターマーカーのロードをサポートしています。今回はWebVTT形式のチャプターマーカーでやってみます。

※ WebVTTは、HTML5標準の一部であるプレーンテキスト形式であり、字幕やクローズドキャプションの提供にも使用されます。これらのWebVTTファイルは非常に単純で、ビデオの特定の時間範囲の章のタイトルが含まれています。

WebVTTファイル

以下のファイルを準備します。

00:00:00.000 --> 00:00:18.958まではオープニングというタイトルを表示する　といった形式になります。

WEBVTT

1
00:00:00.000 --> 00:00:18.958
オープニング

2
00:00:18.958 --> 00:00:28.458
アジェンダ

3
00:00:28.458 --> 00:00:47.708
Freeプランで利用できる攻撃の種類

4
00:00:47.708 --> 00:01:01.708
デモホスト

5
00:01:01.708 --> 00:01:42.708
Gremlinへのサインアップとデモホストの起動

6
00:01:42.708 --> 00:04:05.000
CPU Attackの作成と実行

7
00:04:05.000 --> 00:06:11.000
Shutdown Attackの作成と実行

8
00:06:11.000 --> 00:07:36.000
Blackhole Attackの作成と実行

9
00:07:36.000 --> 00:07:49.000
まとめ

ファイルが準備できたら、http経由でアクセスできるところにアップロードします(s3やcloudinaryなど)

THEOplayerでチャプターマーカーを表示する

player.source = {
    ...
    textTracks : [{
        kind : 'chapters',
        src : 'https://<<Path to vtt file>>',
        srclang : 'ja'
    }]
};

textTracksというプロパティを追加します。